.comment-box {
  margin: 0 $margin-base * 2 $margin-base * 2 $margin-base * 2;
  padding-top: $margin-base * 2;
  border-top: $border-base;
  &_title {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: $font-size;
    margin: $margin-base * 2 0;
    span:after {
      width: 0;
      height: 2px;
      margin-top: 4px;
      content: '';
      display: block;
      background: #d6d6d6;
      transition: width 0.5s;
    }
    span:hover:after {
      width: 100%;
    }
  }
  &_input {
    textarea {
      width: 100%;
      height: 100px;
      padding: 10px;
      border: $border-base;
      background: #f4f5f5;
      margin-bottom: $margin-base;
      border-bottom: $border-base;
    }
    .input-options {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      input {
        height: 36px;
        border: 1px solid #ccc;
        padding: $margin-base;
        margin-right: $margin-base;
      }
    }
    button {
      background: #464747;
      padding: $margin-base $margin-base * 2;
      color: #fff;
      cursor: not-allowed;
    }
    button.active {
      background: #408b6a;
      cursor: pointer;
    }
  }
  &_list {
    &--items {
      display: flex;
      margin: $margin-base * 2 0;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: $margin-base;
      }
      .content {
        line-height: 20px;
        font-size: $font-size-sm;
        p:nth-child(2) {
          color: #8c8c8c;
          span {
            margin-right: $margin-base;
          }
        }
      }
    }
  }
}
